<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂亮的颜色导航条（广州移动公交-新闻12点半）</title>

<style type="text/css">
	.nav{
		position:relative; width:960px; margin:0 auto;
	}
	.nav a{
		float:left; display:inline; background:#d1020a; color:#fff; padding:30px 100px 10px 10px; position:absolute; text-decoration:none; font-family:"微软雅黑", "黑体", "宋体", "新宋体", "Arial Black"; font-size:24px;
		-moz-box-shadow:5px 5px 5px #333 ; 
		-webkit-box-shadow:5px 5px 5px #333 ;
		box-shadow:-5px 5px 5px #333 ;
	}
	.nav a span{
		display:block; font-size:16px;
	}
	.nav a.selected{
		padding-top:40px;
	}
	.nav .red {
		right:0px; background:#d1020a;
	}
	.nav .orange{
		right:100px; background:#ef7000;
	}
	.nav .yellow{
		right:200px; background:#fcb800;
	} 
	.nav .green{
		right:300px; background:#7cbe16;
	} 
	 
	.nav .blue {
		right:400px; background:#0480c8;
	} 
	.nav .purple{
		right:500px; background:#3b3388;
	}
</style>
</head>

<body>

<div class="nav">
	<a href="#" class="purple">新闻<span>News</span></a>
	<a href="#" class="blue selected">新闻<span>News</span></a>
	<a href="#" class="green">新闻<span>News</span></a>
	<a href="#" class="yellow">新闻<span>News</span></a>
	<a href="#" class="orange">新闻<span>News</span></a>
	<a href="#" class="red">新闻<span>News</span></a>
</div>
</body>
</html>
